<!-- 专家排班 -->
<template>
  <div>
    <ContainerSlot>
      <template slot="searchModule">
        <SearchForm :label-width="labelWidth" :form-config="formConfig" :form-data="formData" :slot-list="slotList">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()">
              查询
            </el-button>
          </template>
        </SearchForm>
      </template>
      <template slot="operationModule">
        <el-button type="primary" @click="add">添加</el-button>
        <!-- <el-button type="danger" @click="del">删除</el-button> -->
      </template>
      <template slot="contentModule">
        <Table :prop-list="propList" :list-data="tableData">
          <template slot="operation" slot-scope="{row}">
            <!-- <el-button class="optBtn" type="primary" plain >
        <i class="el-icon-circle-plus-outline"></i>
        添加
      </el-button> -->
             <el-button class="opt" type="primary" v-show="row.scheduleId" plain @click="edit(row)">
                <i class="el-icon-edit-outline"></i>
                编辑
              </el-button>
              <el-button class="opt" type="danger" v-show="row.scheduleId" plain @click="del(row)">
                <i class="el-icon-delete"></i>
                删除
              </el-button>
          </template>
        </Table>
      </template>
      <template slot="footerModule">
        <el-pagination :current-page="currentPage" background :page-size="pageSize" :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </ContainerSlot>
    <!-- 对话框 -->
    <el-dialog :close-on-click-modal='false' :title="`${title}专家排班`" :visible.sync="dialogFormVisible" top="30vh" @close="cancle">
      <el-form ref="ruleForm" :inline="true" :model="form" :rules="rules">
        <el-form-item label="专家姓名：" :label-width="formLabelWidth" prop="name">
          <el-select v-model="form.name" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
            <!-- name -->
            <!-- <el-input v-model="form.name" autocomplete="off" /> -->
          </el-select></el-form-item>
        <el-form-item label="排班日期：" arrow-control prop="type" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.type" @change="changeDay">
            <el-checkbox label="onMonday" name="type">周一</el-checkbox>
            <el-checkbox label="onTuesday" name="type">周二</el-checkbox>
            <el-checkbox label="onWednesday" name="type">周三</el-checkbox>
            <el-checkbox label="onThursday" name="type">周四</el-checkbox>
            <el-checkbox label="onFriday" name="type">周五</el-checkbox>
            <el-checkbox label="onSaturday" name="type">周六</el-checkbox>
            <el-checkbox label="onSunday" name="type">周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="排班时间：" :label-width="formLabelWidth" prop="time">
          <el-time-picker v-model="form.time" is-range value-format="HH:mm" format="HH:mm" clearable arrow-control range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="changeTime" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="confirmAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import expertTypesettingApi from '@/api/specialist-consultation/expert-management/expert-typesetting/index'

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data() {
    return {
      expertTypesettingList: [],
      title: '添加',
      total: 1,
      currentPage: 1,
      pageSize: 10,
      propList: [
        { prop: 'name', label: '专家姓名', minWidth: '80' },
        { prop: 'weekInfo', label: '排班日期',minWidth: '300' },
        { prop: 'timeRange', label: '排班时间' },
        { label: '操作', minWidth: '180', slotName: 'operation' }
      ],
      tableData: [],
      labelWidth: '100px',
      // 表单配置
      formConfig: [
        {
          label: '专家名称',
          prop: 'name1',
          type: 'input',
          width: '150px'
        }
      ],
      // 插槽
      slotList: [
        {
          slotName: 'searchBtn'
        }
      ],
      // 表单数据
      formData: {
        name1: ''
      },
      dialogFormVisible: false,
      scheduleId: '',
      formLabelWidth: '120px',
      form: {
        name: '',
        type: [],
        time: '',
        scheduleId: '',
        timeRange: []
      },
      form1:{},
      // type: [],
      rules: {
        name: [
          { required: true, message: '请选择专家姓名', trigger: ['blur','change'] },
        ],
        type: [
          { required: true, message: '请至少选择一个日期', trigger: ['change','blur'] }
        ],
        time: [
          { required: true, message: '请选择排班时间', trigger: ['blur','change'] },
        ]
      },
      userList: []
    }
  },
  mounted() {
    this.getExpertTypesettingList()
    this.getUserList()
  },
  methods: {
    // 获取所有专家
    async getUserList() {
      const params = {}
      const res = await expertTypesettingApi.queryUserList(params)
      if (res.code === 200) {
        this.userList = res.data
      }
    },
    // 获取专家排班列表
    async getExpertTypesettingList( pages = 1,keyword = '') {
      const params = {
        page: pages,
        size: this.pageSize,
        condition: {
          name: keyword
        }
      }
      const res = await expertTypesettingApi.queryPageByCondition(params)
      if (res.code === 200) {
        this.tableData = res.data.content
        this.total = res.data.totalElements
      }
    },
    // 当前页
    handleCurrentChange(e) {
      this.currentPage = e
      this.getExpertTypesettingList(e)
    },
    handleSizeChange(e) {
      this.pageSize = e
      this.getExpertTypesettingList()
    },
    // 添加
    add() {
      console.log( this.tableData);
      this.title = '添加'
      this.dialogFormVisible = true
       
    },
    // 修改
    edit(row) {
      console.log(row);
      // this.reset()
      this.title = '修改'
      this.form.name = row.name
      this.form.type = row.weekCheck
      this.form.timeRange = row.timeRange
      this.form.time = this.form.timeRange.split('-')
      this.scheduleId = row.scheduleId
      this.dialogFormVisible = true
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // id--删除
          const params = {}
          const res = await expertTypesettingApi.delExpertTypesetting(params, row.scheduleId)
          if (res.code === 200) {
            let arr = this.tableData.filter((item)=>{
              return item.scheduleId
            })
             this.getExpertTypesettingList(arr.length > 1 ? this.currentPage : this.currentPage - 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
           
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 初始化
    reset() {
      this.form = {
        name: '',
        type: [],
        timeRange: '',
        time: '',
        scheduleId: ''
      }
      this.type = []
    },
    // 添加或修改具体业务
    confirmAdd() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.title === '添加') {
            const params = {
              name: this.form.name,
              timeRange: this.form.timeRange,
              ...this.form1
            }

            console.log(params,'添加');
            const res = await expertTypesettingApi.addExpertTypesetting(params)
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.dialogFormVisible = false
              this.getExpertTypesettingList()
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          } else {
            this.form.scheduleId = this.scheduleId
            let params = {
              scheduleId: this.scheduleId,
              name: this.form.name,
              timeRange: this.form.timeRange,
              onMonday: false,
              onTuesday: false,
              onWednesday: false,
              onThursday: false,
              onFriday: false,
              onSaturday: false,
              onSunday: false,
              ...this.form1
            }
            this.form.type.map(el => {
              params[el] = true
            })
            console.log(params,'修改');
            const res = await expertTypesettingApi.editExpertTypesetting(params)
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.dialogFormVisible = false
              this.getExpertTypesettingList()
            }
          }
        } else {
          return false
        }
       this.$nextTick(()=>{
        this.reset()
        this.$refs.ruleForm.resetFields()
      })
      })
    },
    // 选择排版日期
    changeDay(e) {
      console.log(e);
      let arr = e
      this.form.type = e
      let arr1 = {}
      arr.forEach((item) => {
        arr1[item] = true
      })
      this.form1 = arr1
    },
     // 选择排班时间
    changeTime(e) {
      console.log(e,'timerange');
      this.form.time = e
      if(e.length>1) {
        this.form.timeRange = `${e[0]}-${e[1]}`
      } else if (e === null) {
        this.form.time = ''
      }
    },
    cancle() {
      this.dialogFormVisible = false
      this.$nextTick(()=>{
        this.reset()
        this.$refs.ruleForm.resetFields()
      })
      
    },
       // 搜索
    search() {
      this.getExpertTypesettingList(undefined,this.formData.name1)
    },
  }
}
</script>

<style lang="scss" scoped>
// dialog框header背景色
::v-deep .el-dialog__header {
  background: #0480fb;
}
// 设置dialog框叉号颜色
::v-deep .el-dialog__close {
  color: #fff;
}
// dialog框标题颜色
::v-deep .el-dialog__title {
  color: #fff;
}
</style>
